<template>
  <div>
    <div class="x-header">
      <div class="x-header--wrap clearfix">
        <router-link to="/" class="x-logo">
          <img src="../assets/logo_white.png" alt="LOGO" width="125" height="32">
        </router-link>

        <div class="x-menu">
          <span class="menu-user">ALL</span>
          <span class="menu-icon--link" @click="goNav($event)">
            <i class="menu-icon"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="x-home">
      <div class="section--wrap">
        <div class="section section-1 J-pos1">
          <swiper class="swiper" :options="swiperOption" ref="coverSwiper">
            <swiper-slide>
              <div class="swiper-slide">
                <video class="video J-video1" preload="auto"
                  :poster="swiperData.videoPoster"
                  @ended="videoEnd($event)"
                  @canplaythrough="onFirstVideoCanPlay($event)">
                  <source :src="swiperData.video" type="video/mp4">
                </video>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="swiper-slide">
                <img src="../assets/home/slide_2.jpg" alt="">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="swiper-slide">
                <video class="video" preload="auto"
                  :poster="swiperData.videoPoster"
                  @ended="videoEnd($event)">
                  <source :src="swiperData.video" type="video/mp4">
                </video>
              </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination">
              <div v-for="(dot, index) in dotActive"
                @click="onDot(index)" :class="{'swiper-pagination__dot': true, active: dot}"></div>
            </div>
          </swiper>

          <div class="video--play">
            <h3 class="title">CLICK APPLY</h3>
            <p class="desc">international institute of education</p>
            <span class="btn" @click="onShowForm()"></span>
          </div>

          <c-form :isShowForm="isShowForm" :callback="onShowFormCallback"></c-form>
        </div>

        <div class="section section-2 J-pos2">
          <div class="header">
            <p class="header--tip">discover</p>
            <h2 class="header--title">IN CHINA</h2>
          </div>
          <div class="x-photos">
            <transition-group name="photo--fade-slide" class="photos-items" tag="ul">
              <li :key="index" class="photos-item" v-if="transObject.showPhotos"
                v-for="(item, index) in homePhotosConfig"
                @mouseover="onMouseOver(item, index)"
                @mouseleave="onMouseLeave(item, index)">
                <img :src="item.image" alt="Photo">
                <div class="photo-location" v-if="item.location">
                    <em v-if="item.location.lv1">{{ item.location.lv1 }}</em>
                    <span v-if="item.location.lv2">{{ item.location.lv2 }}</span>
                </div>
                <transition name="fade">
                  <div class="photo-more" v-if="item.active" :style="getMoreStyle(item)">
                    <p class="photo-more__desc">{{ item.desc.value }}</p>
                    <router-link class="photo-more__look" :to="item.to">
                      <span>Look</span>
                      <i class="photo-more__pointer"></i>
                    </router-link>
                  </div>
                </transition>
              </li>
            </transition-group>
          </div>
        </div>


        <div class="section section-3 J-pos3">
          <div class="section-title--wrap">
            <transition name="about-slide">
              <div class="section-title" v-if="transObject.showAboutTitle">
                <img src="../assets/home/index_about_main_title.png" alt="About">
              </div>
            </transition>
          </div>

          <div key="0" class="row row-1">
            <div class="col col-1 col-img">
              <img src="../assets/home/index_about_gallery_1.jpg" alt="About">
            </div>
            <div class="col col-1 col-img">
              <img src="../assets/home/index_about_gallery_2.jpg" alt="About">
            </div>
            <transition name="fade-text">
              <div class="col col-2 col-text" v-if="transObject.showAbout">
                <p class="subtitle">a brief introducion</p>
                <h3 class="title">ABOUT</h3>
                <p class="desc">In 2003 NAEG China, established the Eyre education group, under the mutual familyt, Chinese, overseas travel, international exchange students, foreign tutors and other projects. </p>
                <p class="desc">I2 international school focus on global, with top international strategic partners, provides the same level of different schemes, personalized customized lifelong learning courses for customers around the world. Content covers language, art, culture, sports, study abroad, management, etc.. At present, the rapid developme</p>
              </div>
            </transition>
          </div>
          <div key="1" class="row row-2 J-pos4">
            <transition name="fade-text">
              <div class="col col-1 col-text" v-if="transObject.showFeature">
                <h3 class="title">FEATURE</h3>
                <p class="desc">ART</p>
                <p class="desc">CULTURE</p>
                <p class="desc">SPORTS</p>
                <p class="desc">STUDY ABROAD</p>
                <p class="desc">MANAGEMENT</p>
                <p class="desc">ETC.</p>
              </div>
            </transition>
            <div class="col-image">
              <div class="col col-1 col-img">
                <img src="../assets/home/index_about_gallery_3.jpg" alt="About">
              </div>
              <div class="col col-1 col-img">
                <img src="../assets/home/index_about_gallery_4.jpg" alt="About">
              </div>
              <div class="col col-1 col-img">
                <img src="../assets/home/index_about_gallery_5.jpg" alt="About">
              </div>
            </div>
          </div>

        </div>

        <div class="section section-4 J-pos5">
          <transition name="section-fade-in">
            <div class="wrap" v-if="transObject.showHere">
              <div class="header">
                <h2 class="title">HERE ARE A FEW THINGS</h2>
                <p class="subtitle">we get asked regularly</p>
              </div>
              <ul class="items clearfix">
                <li :class="getHereClass(item)" v-for="item in homeAskConfig">
                  <h3 class="item-title">{{ item.title }}</h3>
                  <p class="item-desc">{{ item.desc }}</p>
                  <i class="item-icon" :style="getHereStyle(item)"></i>
                </li>
              </ul>
            </div>
          </transition>
        </div>

        <div class="c-path">
          <div :class="{'c-path--dot': true, active: item.active}"
            v-for="(item, index) in path"
            @click="toPath(item, index)">
            <span class="normal">
              <span class="text">{{ item.text }}</span>
              <i class="normal-icon"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import $ from 'jquery'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { homePhotosConfig } from '../config/homePhotos.config'
import { homeAskConfig } from '../config/homeAsk.config'
import { swiperDefaultConfig } from '../config/swiper.config'
import XPhotos from '@/components/XPhotos'
import CForm from '@/components/CForm'

const $window = $(window)

export default {
  components: {
    swiper,
    swiperSlide,
    XPhotos,
    CForm,
  },
  data() {
    return {
      path: [{
        active: true,
        text: 'video full path',
      }, {
        active: false,
        text: 'discovr in china',
      }, {
        active: false,
        text: 'about in china',
      }, {
        active: false,
        text: 'live in china',
      }, {
        active: false,
        text: 'support',
      }],
      isFirstVideoPlay: true,
      // 是否显示浮层
      isShowForm: false,
      // anima object
      transObject: {
        showPhotos: false,
        showAbout: false,
        showFeature: false,
        showAboutTitle: false,
        showHere: false,
      },
      // swiperData
      swiperData: {
        video: require('../assets/home/Busy-City.mp4'),
        videoPoster: require('../assets/home/Busy-City.jpg')
      },
      homePhotosConfig,
      homeAskConfig,
      dotActive: [true, false, false],
      swiperOption: $.extend({}, swiperDefaultConfig, {
          autoplay: 2000,
          onTransitionStart: (swiper) => {
            const index = swiper.realIndex;
            this.dotActive = this.dotActive.map((d, i) => {
              return i === index
            })
          }
      })
    }
  },
  computed: {
    swiper() {
      return this.$refs.coverSwiper.swiper
    }
  },
  mounted() {
    const swiper = this.swiper

    // 先暂停，然后第一个播放完后轮播
    if(swiper) {
      swiper.stopAutoplay()
    }

    this.onShow()
    $window.on('scroll.sectioin', e => {
      this.onShow()
    })
  },
  destroyed() {
    this.onRemoveScrollEvent()
  },
  methods: {
    toPath(item, index) {
      let top = 0;

      switch(index) {
        case 0:
          top = this.getPathTop( $('.J-pos1') )
          break;
        case 1:
          top = this.getPathTop( $('.J-pos2') )
          break;
        case 2:
          top = this.getPathTop( $('.J-pos3') )
          break;
        case 3:
          top = this.getPathTop( $('.J-pos4') )
          break;
        case 4:
          top = this.getPathTop( $('.J-pos5') )
          break;
        default:
          top = this.getPathTop( $('.J-pos1') )
          break;
      }

      this.path.map((p, i) => {
        p.active = i === +index
        return p
      });

      $('html, body').stop(true, true).animate({
        scrollTop: top
      })
    },
    getPathTop($el) {
      // todo cache pos
      const offset = $el.offset()
      const top = offset.top

      return top
    },
    onFirstVideoCanPlay(e) {
      if(this.isFirstVideoPlay) {
        const video = e.target || e.srcElement
        video.play()
      }
    },
    onRemoveScrollEvent() {
      $window.off('scroll.sectioin')
    },
    onShow() {
      this.onShowPhotos()
      this.onShowAboutTitle()
      this.onShowAbout()
      this.onShowFeature()
      this.onShowHere()
    },
    onShowPhotos() {
      const top = $window.scrollTop()
      if(top > 560) {
        this.transObject.showPhotos = true
      }
    },
    onShowAboutTitle() {
      const top = $window.scrollTop()
      if(top > 1200) {
        this.transObject.showAboutTitle = true
      }
    },
    onShowAbout() {
      const top = $window.scrollTop()
      if(top > 1860) {
        this.transObject.showAbout = true
      }
    },
    onShowFeature() {
      const top = $window.scrollTop()
      if(top > 2450) {
        this.transObject.showFeature = true
      }
    },
    onShowHere() {
      const top = $window.scrollTop()
      if(top > 3110) {
        this.transObject.showHere = true
      }
    },
    getMoreStyle({ desc }) {
      const { top, left } = desc;

      return {
        top,
        left
      }
    },
    onMouseOver(item, index) {
      this.homePhotosConfig = this.homePhotosConfig.map((d, i) => {
        if(i === +index) {
          d.active = true
        } else {
          d.active = false
        }

        return d
      });
    },
    onMouseLeave(item, index) {
      if(item.active) {
        item.active = false
      }
    },
    getHereClass({ id }) {
      return {
        item: true,
        [`item-${id}`]: true
      }
    },
    getHereStyle({ style }) {
      const { x, y, width, height, top, left } = style

      return {
        backgroundPosition: `${x} ${y}`,
        width,
        height,
        top,
        left
      }
    },
    goNav(e) {
      const video = $('.J-video1').get(0)
      if(!video.paused) {
        video.pause()
      }

      const route = this.$route
      const current = route.name

      this.$router.push({
        name: 'nav',
        params: {
          current
        }
      })
    },
    onDot(index) {
      let _index = +index
      this.swiper.slideTo(_index + 1, 1000, false)

      this.dotActive = this.dotActive.map((d, i) => {
        return i === +index
      })
    },
    videoEnd(e) {
      // video 黑屏的处理
      const video = $('.J-video1').get(0)
      video.pause()
      video.currentTime = 0
      video.load()
      this.isFirstVideoPlay = false

      this.swiper.slideNext()
    },
    onShowFormCallback() {
      this.isShowForm = false
    },
    onShowForm() {
      this.isShowForm = true
    }
  }
}

</script>

<style lang="scss" scoped>
  // home photos anim
  .photo--fade-slide-enter-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 3s, opacity 2s;
  }
  .photo--fade-slide-enter {
    opacity: 0;
    transition: transform 3s, opacity 2s;
  }
  .photo--fade-slide-leave {
    opacity: 1;
    transition: all 2s;
  }
  .photo--fade-slide-leave-active {
    opacity: 0;
    transition: all 2s;
  }

  .section-fade-in-enter-active,
  .section-fade-in-leave {
    opacity: 1;
    transition: opacity .5s;
  }
  .section-fade-in-enter,
  .section-fade-in-leave-active {
    opacity: 0;
    transition: opacity .5s;
  }

  .about-slide-enter-active,
  .about-slide-leave {
    transform: translate3d(0, 0, 0);
    transition: all 2s;
  }
  .about-slide-enter,
  .about-slide-leave-active {
    transform: translate3d(-10%, 0, 0);
    transition: all 2s;
  }

  .fade-text-enter-active,
  .fade-text-leave {
    opacity: 1;
    transition: all .5s;
  }
  .fade-text-enter,
  .fade-text-leave-active {
    opacity: 0;
    transition: all .5s;
  }

  .section-2 {
    .photo--fade-slide-enter {
      &.photos-item:nth-child(1) {
        transform: translate3d(-30%, 0, 0);
      }
      &.photos-item:nth-child(2) {
        transform: translate3d(0, -30%, 0);
      }
      &.photos-item:nth-child(3) {
        transform: translate3d(30%, 0, 0);
      }
      &.photos-item:nth-child(5) {
        transform: translate3d(0, 80%, 0);
      }
    }
  }

  video {
    vertical-align: middle;
  }

  img {
    vertical-align: middle;
  }

  .x-home {
    margin-top: -71px;
  }

  $width: 800px;
  .video--play {
    position: absolute;
    bottom: 122px;
    left: 50%;
    margin-left: -$width / 2;
    width: $width;
    color: #fff;
    text-align: center;
    z-index: 100;
    .title {
      font-size: 72px;
      font-family: Montserrat;
      font-weight: 700;
      line-height: 1;
    }
    .desc {
      font-size: 24px;
      margin-bottom: 10px;
    }
    .btn {
      cursor: pointer;
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 3px #fff solid;
      position: relative;
      &::after {
        content: '\20';
        display: block;
        width: 18px;
        height: 30px;
        background: url("../assets/video_play.png") 0 0 no-repeat;

        position: absolute;
        top: 10px;
        left: 18px;
      }
    }
  }

  .swiper {
    .swiper-slide {
      position: relative;
    }
    .swiper-pagination {
      left: 50%;
      margin-left: -13px;
      bottom: 50px;
    }
    .swiper-pagination__dot {
      cursor: pointer;
      display: inline-block;
      width: 13px;
      height: 13px;
      box-sizing: border-box;
      border: 1px #fff solid;
      border-radius: 50%;
      margin-left: 10px;
      &:first-child {
        margin-left: 0;
      }
      &.active {
        background: #fff;
      }
    }
  }

  .section-2 {
    .header {
      text-align: center;
      padding: 75px 0 60px 0;
    }
    .header--title {
      font-size: 72px;
      font-weight: 700;
      margin: 0;
    }
    .header--tip {
      font-size: 18px;
      letter-spacing: 10px;
      font-weight: lighter;
    }
    .x-photos {
      width: 1600px;
      margin: 0 auto;
    }
  }

  .section-3 {
    padding: 65px 0 255px 0;
    background: #353038;
    .section-title--wrap {
      margin: 0 50px 95px 50px;
    }
    .section-title {
      img {
        max-width: 100%;
        height: auto;
      }
    }
    .row {
      color: #fff;
      display: flex;
      .col-img {
        img {
          transition: transform .5s linear;
        }

        &:hover {
          img {
            transform: scale(1.1);
          }
        }
      }
    }
    .col {
      margin-right: 4px;
      margin-bottom: 4px;
      overflow: hidden;
    }
    .col img {
      max-width: 100%;
      height: auto;
    }
    .col-1 {
      flex-basis: 25%;
    }
    .col-2 {
      flex-basis: 50%;
    }
    .row-1 {
      align-items: flex-start;
      .subtitle {
        padding-top: 4px;
        font-family: Montserrat;
        font-size: 18px;
        font-weight: lighter;
        letter-spacing: 2px;
      }
      .title {
        height: 80px;
        width: auto;
        margin: 0;
        display: inline-block;
        line-height: 1;
        font-size: 80px;
        font-weight: 700;
        color: #fff;
        font-family: Montserrat;
        padding-right: 50px;
      }
      .desc {
        font-size: 14px;
        line-height: 22px;
        margin: 4px 0;
        font-family: ClanPro;
      }
      .col-text {
        overflow: hidden;
        padding-left: 40px;
        padding-right: 280px;
        box-sizing: border-box;
      }
    }
    .row-2 {
      text-align: right;
      justify-content: flex-end;
      .col-text {
        align-self: flex-end;
      }
      .col-image {
        flex-basis: 75%;
        display: flex;
        .col-1 {
          flex-basis: 33.333333%;
        }
      }
      .title {
        display: block;
        line-height: 90px;
        font-size: 80px;
      }
      .desc {
        padding-right: 20px;
        line-height: 35px;
        font-size: 30px;
        font-weight: 700;
        font-family: Montserrat;
      }
    }
  }

  .section-4 {
    position: relative;
    z-index: 1;
    text-align: center;
    font-family: Montserrat;
    padding-bottom: 70px;
    height: 854px;
    .wrap {
      width: 1370px;
      margin: 0 auto;
      margin-top: -195px;
      background-color: #fff;
      box-sizing: border-box;
      padding-top: 80px;
      padding-bottom: 30px;
      box-shadow: 0 36px 128px rgba(0,0,0,.3);
    }
    .title {
      font-size: 70px;
      height: 70px;
      font-weight: 700;
    }
    .subtitle {
      height: 36px;
      font-size: 36px;
    }
    .items {
      padding: 100px 75px 0;
    }
    .item {
      float: left;
      width: 33.33333%;
      text-align: left;
      box-sizing: border-box;
      padding-right: 70px;
      padding-left: 50px;
      margin-bottom: 50px;
      font-family: ClanPro;
      position: relative;
      .item-icon {
        position: absolute;
        background: url("../assets/home/home_sprite_3.png") 0 0 no-repeat;
      }
    }
    .item-title {
      font-size: 16px;
      line-height: 30px;
      height: 30px;
      font-weight: 700;
    }
    .item-desc {
      font-size: 14px;
      line-height: 22px;
      font-weight: 400;
      word-break: break-all;
      text-align: justify;
    }
  }

  .x-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-sizing: border-box;
    border-top: 4px solid maroon;
  }

  .x-header--wrap {
    max-width: 1640px;
    margin: 0 auto;
    padding: 15px 30px;
  }

  /* logo */
  .x-logo {
    float: left;
  }

  .x-menu {
    float: right;
    line-height: 32px;
  }

  .menu-user {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin-right: 3px;
    color: #fff;
    position: relative;
    padding-right: 20px;
    &::after {
      display: block;
      content: '\20';
      width: 7px;
      height: 12px;
      background: url("../assets/menu_pointer.png") 0 0 no-repeat;

      position: absolute;
      top: 10px;
      right: 3px;
    }
  }

  .menu-icon--link {
    cursor: pointer;
    display: inline-block;
    width: 29px;
    height: 32px;
    vertical-align: middle;
    position: relative;
  }

  .menu-icon {
    display: inline-block;
    width: 29px;
    height: 21px;
    background: url("../assets/menu.png") -28px 0 no-repeat;

    position: absolute;
    top: 4px;
    right: 0;
  }


  // path
  .section-1 {
    position: relative;
    .c-path  {
      top: 50%;
      right: 56px;
      margin-top: -128px;
    }
  }

  .section-3 {
    position: relative;
    .c-path {
      top: 224px;
      right: 40px;
    }
  }

  // media start
  // section 4
  @media only screen and (max-width: 1371px) {
    .section-4 {
      .wrap {
        width: 100%;
      }
    }
  }

  // section 3
  @media only screen and (max-width: 1740px) {
    .section-3 {
      .row-1 {
        .col-text {
          padding-right: 200px;
        }
      }
    }
  }
  @media only screen and (max-width: 1630px) {
    .section-3 {
      .row-1 {
        .col-text {
          padding-right: 100px;
        }
      }
    }
  }
  @media only screen and (max-width: 1560px) {
    .section-3 {
      .row-1 {
        .col-text {
          padding-right: 20px;
        }
      }
      .row-2 {
        .title {
          font-size: 72px;
        }
      }
    }
  }
  @media only screen and (max-width: 1500px) {
    .section-3 {
      .row-1 {
        .col-text {
          padding-left: 10px;
          padding-right: 0;
        }
      }
      .row-2 {
        .title {
          font-size: 64px;
        }
      }
    }
  }

  // section 2
  @import '../css/_homePhotos.scss';
  // media end
</style>
